<template>
	<view class="start_countdown">
		<text class="start_timeh">{{h}}</text>
		<text class="start_timecolon">:</text>
		<text class="start_timei">{{i}}</text>
		<text class="start_timecolon">:</text>
		<text class="start_times">{{s}}</text>
	</view>
</template>
<script>
	/**
	 * Countdown 倒计时
	 * @description 倒计时组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=25
	 * @property {String} backgroundColor 背景色
	 * @property {String} color 文字颜色
	 * @property {Number} day 天数
	 * @property {Number} hour 小时
	 * @property {Number} minute 分钟
	 * @property {Number} second 秒
	 * @property {Number} timestamp 时间戳
	 * @property {Boolean} showDay = [true|false] 是否显示天数
	 * @property {Boolean} showColon = [true|false] 是否以冒号为分隔符
	 * @property {String} splitorColor 分割符号颜色
	 * @event {Function} timeup 倒计时时间到触发事件
	 * @example <uni-countdown :day="1" :hour="1" :minute="12" :second="40"></uni-countdown>
	 */
	export default {
		name: 'StartCountdown',
		props: {
			showDay: {
				type: Boolean,
				default: true
			},
			showColon: {
				type: Boolean,
				default: true
			},
			backgroundColor: {
				type: String,
				default: ''
			},
			borderColor: {
				type: String,
				default: '#000000'
			},
			color: {
				type: String,
				default: '#000000'
			},
			splitorColor: {
				type: String,
				default: '#000000'
			},
			day: {
				type: Number,
				default: 0
			},
			hour: {
				type: Number,
				default: 0
			},
			minute: {
				type: Number,
				default: 0
			},
			second: {
				type: Number,
				default: 0
			},
			timestamp: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				timer: null,
				syncFlag: false,
				d: '00',
				h: '00',
				i: '00',
				s: '00',
				leftTime: 0,
				seconds: 0,
				isShow: true
			}
		},
		watch: {
			day(val) {
				this.changeFlag()
			},
			hour(val) {
				this.changeFlag()
			},
			minute(val) {
				this.changeFlag()
			},
			second(val) {
				this.changeFlag()
			},
			timestamp(val) {
				console.log(val);
				this.startData()
			}
		},
		created: function(e) {
			this.startData();
		},
		// // 组件更新 只要更新就会触发 有点浪费性能
		// updated(){
		// 	if(!this.isShow){
		// 		console.log(12);
		// 		// this.startData();
		// 	}
		// },
		// // 组件显示 类似于onShow 当组件显示的时候 进行处理 没有显示的时候进行处理
		// activated() {
		// 	this.isShow=false
		// },
		// // 组件隐藏 
		// deactivated(){
		// 	this.isShow=true
		// },
		onHide() {
			clearInterval(this.timer)
		},
		beforeDestroy() {
			clearInterval(this.timer)
		},
		methods: {
			toSeconds(timestamp, day, hours, minutes, seconds) {
				if (timestamp) {
					return timestamp - parseInt(new Date().getTime() / 1000, 10)
				}
				return day * 60 * 60 * 24 + hours * 60 * 60 + minutes * 60 + seconds
			},
			timeUp() {
				clearInterval(this.timer)
				this.$emit('timeup')
			},
			countDown() {
				let seconds = this.seconds
				let [day, hour, minute, second] = [0, 0, 0, 0]
				if (seconds > 0) {
					day = Math.floor(seconds / (60 * 60 * 24))
					hour = Math.floor(seconds / (60 * 60))
					minute = Math.floor(seconds / 60) - (day * 24 * 60) - ((hour - (day * 24)) * 60)
					second = Math.floor(seconds) - (day * 24 * 60 * 60) - ((hour - (day * 24)) * 60 * 60) - (minute * 60)
				} else {
					this.timeUp()
				}
				if (day < 10) {
					day = '0' + day
				}
				if (hour < 10) {
					hour = '0' + hour
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				let that = this
				that.d = day
				that.h = hour
				that.i = minute
				that.s = second
			},
			startData() {
				clearInterval(this.timer)
				this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
				if (this.seconds <= 0) {
					return
				}
				this.countDown()
				this.timer = setInterval(() => {
					this.seconds--
					if (this.seconds < 0) {
						this.timeUp()
						return
					}
					this.countDown()
				}, 1000)
			},
			changeFlag() {
				if (!this.syncFlag) {
					this.seconds = this.toSeconds(this.timestamp, this.day, this.hour, this.minute, this.second)
					this.startData();
					this.syncFlag = true;
				}
			}
		}
	}
</script>
<style scoped>
	.start_timeh {
		background: #ff4e35;
		padding: 0rpx 5rpx;
		border-radius: 5rpx;
	}
	.start_timei {

		background: #ff4e35;
		padding: 0rpx 5rpx;
		border-radius: 5rpx;
	}

	.start_times {
		background: #ff4e35;
		padding: 0rpx 5rpx;
		border-radius: 5rpx;
	}

	.start_countdown {
		margin-left: 10rpx;
		border-radius: 5rpx;
	}
</style>